<template>
  <div class="search-music">
    <!-- 搜索框 -->
    <div class="hotsearch">
      <form action="/">
        <van-search
          v-model="text"
          shape="round"
          placeholder="搜索歌曲、歌手、专辑"
          @search="onSearch(text)"
          @focus="onstate"
        />
      </form>
    </div>
    <!-- 搜索建议 -->

    <div class="suggest" v-show="text && !state">
      <p>搜索"{{ text }}"</p>
      <ul class="suggest-single">
        <li
          :data-suggestName="item.keyword"
          v-for="(item, i) in suggest"
          :key="i"
          @click="suggestSearch(item.keyword)"
        >
          <i class="searchSvg"></i>
          <span class="sugWord"> {{ item.keyword }}</span>
        </li>
      </ul>
    </div>
    <!-- 热搜榜 -->
    <div class="m-hotlist" v-show="!text">
      <p class="title">热门搜索</p>
      <div class="hotlist">
        <ul class="list">
          <li
            class="item"
            v-for="(item, i) in hotList"
            @click="hotSearch(item.first)"
            :key="i"
          >
            {{ item.first }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 最佳匹配展示 -->
    <!-- 歌曲列表组件 -->
    <showListVue :list="matchList" v-show="state" />
  </div>
</template>

<script>
import showListVue from "@/components/untils/showList.vue";
export default {
  data() {
    return {
      text: "", //搜索建议text
      suggest: [], // 输入提示建议
      hotList: [], //热门搜索数据
      matchList: [], //关键字匹配成功数据
      state: true, //控制组件展示,默认显示
    };
  },
  components: {
    showListVue,
  },
  watch: {
    text: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal === "") {
          this.suggest = [];
          this.matchList = [];
          return;
        }
        this.$request(
          "get",
          `/search/suggest?keywords=${newVal}&type=mobile`
        ).then((res) => {
          if (res.code === 200) {
            // console.log("搜索建议:", res.result.allMatch);
            this.suggest = res.result.allMatch;
          }
        });
      },
    },
  },
  created() {
    this.getHotList();
  },
  methods: {
    // 搜索框获取焦距时
    onstate() {
      console.log("初始化前:", this.state);
      this.state = false;
      this.matchList = [];
      console.log("初始化后:", this.state);
    },
    // 最佳匹配搜索结果
    onSearch(text) {
      this.$request("get", "/cloudsearch?keywords=" + text + "&limit=20").then(
        (res) => {
          console.log("关键词:", text);
          console.log("数据:", res.result);
          if (res.code == 200) {
            for (let i = 0; i < res.result.songs.length; i++) {
              let matchList = {};
              matchList.songname = res.result.songs[i].name; //歌名
              matchList.name = res.result.songs[i].ar[0].name; //人名
              matchList.alname = res.result.songs[i].al.name; //专辑名
              matchList.id = res.result.songs[i].id;
              matchList.picurl = res.result.songs[i].al.picUrl;

              this.matchList.push(matchList);
            }
            // 回车更改状态
            this.state = true;
            console.log("回车后:", this.state);
            // console.log("数据:", this.matchList);
          }
        }
      );
    },
    // 获取热门搜索数据
    getHotList() {
      this.$request("get", "/search/hot").then((res) => {
        if (res.code == 200) {
          this.hotList = res.result.hots;
          // console.log("热门搜索:", this.hotList);
        }
      });
    },
    //点击关键字跳转最佳匹配搜索结果
    suggestSearch(text) {
      this.onSearch(text);
    },
    hotSearch(text) {
      this.text = text;
      this.state = false;
      this.onSearch(text);
    },
  },
};
</script>
<style scoped lang="less">
.search-music {
  width: 100%;
  .hotsearch {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .suggest {
    p {
      margin-left: 10px;
      font-size: 15px;
      color: #507daf;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }

    .suggest-single {
      li {
        margin: 15px 0 0 10px;
        .searchSvg {
          width: 15px;
          height: 15px;
          background-image: url("@/assets/search.svg");
          display: inline-block;
          vertical-align: middle;
          background-position: 0 0;
          background-size: contain;
          background-repeat: no-repeat;
        }
        .sugWord {
          font-size: 15px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
        }
      }
    }
  }
  .m-hotlist {
    .title {
      padding: 0;
      margin-left: 10px;
      font-size: 12px;
      line-height: 12px;
      color: #666;
    }

    .hotlist {
      .list {
        margin: 10px 0 7px;
        .item {
          border-radius: 25px;
          display: inline-block;
          border: 1px solid rgba(0, 0, 0, 0.1);
          margin: 0 5px 8px 5px;
          padding: 0 10px;
          font-size: 14px;
          line-height: 30px;
          color: #333;
        }
      }
    }
  }
}
</style>